<template>
  <div id='tmpl'>

		<div class="silder">
		<slider :imgs="imgs"></slider>
		</div>


		<div id="buy">
			<h4 v-text='info.title'></h4>
			<p class="line"></p>
			<ul>
				<li class="price">
					市场价: <s>￥{{info.market_price}}</s>    销售价：<span>￥{{info.sell_price}}</span>
				</li>
				<li class="inputli">
					购买数量：<inputnumber v-on:dataobj='getcount' class="inputnumber"></inputnumber>
					<transition name="show"
					 @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"
					>
						<div v-if="isshow" class="ball"></div>
					</transition>
				</li>
				<li>
					<mt-button type="primary" size="small">立即购买</mt-button>
					<mt-button type="danger" size="small" @click='toshopcar'>加入购物车</mt-button>
				</li>
			</ul>
		</div>

		<div id="params">
				<h6>商品参数</h6>
				<p class="line"></p>
			<ul>
				<li>商品货号：{{info.goods_no}}</li>
				<li>库存情况：{{info.stock_quantity}}</li>
				<li>上架时间：{{info.add_time | datefmt('YYYY-MM-DD,HH:mm:ss')}}</li>
			</ul>
		</div>
		<div id="other">
			<router-link v-bind="{to:'/goods/desc/'+id}">
				<mt-button class="imgdesc" type="primary" size="large">图文详情</mt-button>
			</router-link>
			<router-link v-bind="{to:'/goods/content/'+id}">
                <mt-button type="danger" size="large">商品评论</mt-button>
			</router-link>
		</div>
  </div>
</template>
<script>
import slider from '../subcom/slider.vue';
import inputnumber from '../subcom/inputnumber.vue';
import {vm,COUNTSTR} from '../../kits/vm.js';
import {setItem,valueObj} from '../../kits/localstorage.js'
export default {
  name: "goodsinfo",
  data() {
    return {
      imgs:[],
      id:'',
	  info:{},
	  inputNumberCount:1,
	  isshow:false
    };
  },
  components:{
	  slider,
	  inputnumber
  },
  created() {
    this.id=this.$route.params.id;
    this.getimgs();
	this.getinfo();
  },
  methods:{
	   toshopcar(){
		  vm.$emit(COUNTSTR,this.inputNumberCount);
		  valueObj.goodsid=this.id;
		  valueObj.count=this.inputNumberCount;
		  setItem(valueObj);
		  this.isshow = !this.isshow;
	  },
	  getcount(count){
		  this.inputNumberCount=count;
	  },
      getimgs(){
         var url  =this.common.domain + '/api/getthumimages/'+this.id;
         this.$http.get(url).then(function(res){
             var data=res.body;
             this.imgs=data.message;
			 for(var i=0;i<this.imgs.length;i++){
				 this.imgs[i].img=this.imgs[i].src
			 }
         })
      },
	  getinfo(){
		  var url=this.common.domain+'/api/goods/getinfo/'+this.id;
		  this.$http.get(url).then(function(res){
             var data=res.body;
             this.info=data.message[0];
         })
	  },
	  beforeEnter(el){
		  el.style.transform="translate(0px,0px)";
	  },
	  enter(el,done){
				//	保证小球出现动画
				el.offsetWidth;
				//	设置小球的结束位置
				el.style.transform = "translate(110px,366px)";
				//结束动画
				done();
			},
			afterEnter(el){
				//重置小球的初始状态
				this.isshow = !this.isshow;
			},
  }
};
</script>

<style lang="css" scoped>
 .silder{
	 border:1px solid rgba(0,0,0,0.4);
	 border-radius: 5px;
	 margin: 5px;
 }

	#buy,#params,#other
	{
		margin: 5px;
		padding: 5px;
		border:1px solid rgba(0,0,0,0.4);
		border-radius: 5px;
	}
 .line{
		height: 1px;
		border: 1px solid rgba(0,0,0,0.2);
	}
	#buy ul,#params ul{
		padding-left: 0px;
	}
 #buy h4{
	 color:#0094ff;
	padding: 5px;
 }
 #buy li,#params li{
	 list-style: none;
	 padding: 8px;
 }

	#buy .price span{
		color:red;
	}

	#other .imgdesc{
		margin-bottom: 20px;
	}
	.inputli{
		position: relative;
	}
	.inputnumber{
		position: absolute;
		left:90px;
		top:-35px;
	}

	.ball{
		background-color: red;
		height: 20px;
		width: 20px;
		border-radius: 50%;
		position: absolute;
		left:150px;
		top:10px;
		transition: all 0.4s ease;
		z-index: 100;
	}
</style>